<template>
  <div class="scheme-box">
    <div class="details-box">
      <div class="details-item details-left">
        <div class="left-title">效能度量</div>
        <div class="details-left-body">
          <div class="left-item">
            <div class="left-text">
              <span>运费：</span>
              <span>{{caseInfo.spArrangeDataVo.freight}}</span>
            </div>
            <div class="left-text">
              <span>时间：</span>
              <span>{{caseInfo.spArrangeDataVo.travelDays}}</span>
            </div>
            <div class="left-text">
              <span>贸易利润率：</span>
              <span>{{caseInfo.spArrangeDataVo.tradeGetRate}}</span>
            </div>
            <div class="left-text">
              <span>船舶利润率：</span>
              <span>{{caseInfo.shipUseRate}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="details-item details-right">
        <a-descriptions :column="4" :labelStyle="labelStyle">
          <a-descriptions-item label="资源合同">{{caseInfo.contractName}}</a-descriptions-item>
          <a-descriptions-item label="贸易类型">
              <span v-for="item in tradeareas" :key="item.value">
                <span v-if="item.value === caseInfo.tradeType">{{item.label}}</span>
              </span>
          </a-descriptions-item>
          <a-descriptions-item label="资源方">{{caseInfo.seller}}</a-descriptions-item>
          <a-descriptions-item label="贸易主体">
               <span v-for="item in areas" :key="item.value">
                <span v-if="item.value === caseInfo.tradeBody">{{item.label}}</span>
              </span>
          </a-descriptions-item>
          <a-descriptions-item label="船舶名称">
            {{caseInfo.shipName}}
          </a-descriptions-item>
          <a-descriptions-item label="IMO">{{caseInfo.imo}}</a-descriptions-item>
          <a-descriptions-item label="租船类型">
              <span v-for="item in contractTypeAreas" :key="item.value">
                <span v-if="item.value === caseInfo.shipContractType">{{item.label}}</span>
              </span>
          </a-descriptions-item>
          <a-descriptions-item label="装载港">{{caseInfo.expectedLoadingPort}}</a-descriptions-item>
          <a-descriptions-item label="卸载港">{{caseInfo.expectedUnloadingPort}}</a-descriptions-item>
          <a-descriptions-item label="预计装载量">
            <span>{{caseInfo.singleGoodsQuantityString}}</span>
          </a-descriptions-item>
          <a-descriptions-item label="预计卸载量">
            <span>{{caseInfo.singleGoodsQuantityString}}</span>
          </a-descriptions-item>
          <template #title>
            <div :style="{textAlign: 'left', fontSize: '20px', color: '#2C3749'}">基本信息</div>
          </template>
        </a-descriptions>
      </div>
    </div>
    <div class="boat-map">
      <span>船运追踪</span>
      <div>
        <iframe id="mapIframe" ref="mapIframe" :width="'100%'" :height="500" src="http://d.myships.com:8091/haiyou/"></iframe>
      </div>
    </div>
  </div>

</template>

<script setup>
import {getCurrentInstance, onMounted, ref} from 'vue';
import { useRoute } from 'vue-router'
// import RadarChart from "@/components/RadarChart/RadarChart.vue";
const { proxy  } = getCurrentInstance()
const route = useRoute()
const labelStyle = ref({
  color: '#6B7A8B'
})
// 贸易类型
const areas = ref([
  {
    label: '长协',
    value: 1
  },
  {
    label: '中期',
    value: 2
  },
  {
    label: '现货',
    value: 3
  }
])
// 贸易主体
const tradeareas = ref([
  {
    label: '国贸',
    value: 1
  },
  {
    label: '新贸',
    value: 2
  },
])
const contractTypeAreas = ref([
  {
    label: '租入长期船',
    value: 1
  },
  {
    label: '租入短期船',
    value: 2
  },
  {
    label: '船舶租出',
    value: 3
  },
  {
    label: '内部转租',
    value: 4
  }
])
const caseInfo = ref({
  spArrangeDataVo: {
    freight: '',
    travelDays: '',
    shipUseRate: '',
    tradeGetRate: '',
  },
  createBy: '',
  schemeNumber: '',
  contractName: '',
  tradeType: '',
  tradeBody: '',
  shipName: '',
  imo: '',
  shipContractType: '',
  expectedLoadingPort: '',
  expectedUnloadingPort: '',
  loadingCapacity: '',
  quantityUnit: '',
  expectedLoadingDate: '',
  expectedLoadingCompletionWindow: '',
  expectedUnloadingCompletionWindow: '',
  expectedUnloadingWindow: ''
})
const getInfo = () => {
  proxy.$api.getShipArrangeInfo(route.query.id).then(res => {
    if (res.resultObject) {
      caseInfo.value = res.resultObject
    }
    console.log('获取的详情', caseInfo.value);
  })
}
onMounted(() => {
  getInfo()
})
</script>

<style lang="scss" scoped>
#mapIframe {
  margin-top: 24px;
  border: 0;
}
.details-box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: #ffffff;
  .details-item {
    border: 1px solid #dcdee0;
    padding: 16px 24px;
  }
  .details-right {
    width:calc(100% - 340px);
    margin: 24px;
  }
  .details-left {
     width: 340px;
    margin: 24px 0 24px 24px;
    .left-title {
      font-size: 20px;
      font-weight: bold;
      text-align: left;
      color: #2c3749;
      line-height: 28px;
      margin-bottom: 15px;
    }
    .details-left-body {
      width: 100%;
      display: flex;
      .left-item-radar {
        width: 60%;
        height: 250px;
      }
      .left-item {
        width: 100%;
        border-radius: 4px;
        .left-text {
          font-size: 14px;
          color: #2C3749;
          height: 60px;
          line-height: 60px;
          text-align: left;
          span:first-child {
            color: #6B7A8B;
          }
        }
      }
    }
  }
}
.boat-map {
  margin-top: 10px;
  padding: 24px 16px;
  background: #ffffff;
  span {
    display: block;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    color: #2c3749;
    line-height: 28px;
  }
}
</style>
